<template>
  <div className="row">

    <!--        页头-->
    <div class="col-12 head1">
      <card>
        <div class="row" >
          <span class="deco"></span>
          <h2 class="clearMargin">面向对象程序设计（Java）</h2>

          <!--          <a href="#/detail-add" target="_blank" class="card-img-top" style="float: right">-->
          <el-button style="margin-left: 45rem;" type="primary" @click="show3 = !show3">点击切换课程</el-button>
          <!--          </a>-->

        </div>
      </card>
    </div>

    <div style="margin-top: 20px; position: relative;">
      <el-collapse-transition>
        <div v-show="show3" style="position: absolute; z-index: 2;">
          <div class="col-12">
            <CourseMenu/>
          </div>
        </div>
      </el-collapse-transition>
    </div>


    <div class="col-12" style="position: relative; z-index: 1;">
      <card>
<!--        <h3 class="card-title">资料管理</h3>-->
        <div class="table-responsive" style="height: 26rem; overflow-x: hidden;overflow-y: hidden">
          <base-table :data="paginatedData"
                      :columns="tableColumns">
            <template slot="columns">
              <th style="height: 2.4rem">#</th>
              <th>类型</th>
              <th>课程</th>
              <th>相关内容</th>
              <th>知识点</th>
              <th>创建时间</th>
              <th>修改时间</th>
              <th class="text-right">编辑</th>
            </template>
            <template slot-scope="{row}">
              <td>{{ row.id }}</td>
              <td>{{ row.type }}</td>
              <td>{{ row.course }}</td>
              <td>{{ row.describe }}</td>
              <td>
                <template v-for="(tag, index) in row.knowledge">
                  <el-tag class="tag-item" :key="index" :type="getTagType(index)">{{ tag }}</el-tag>
                </template>
              </td>
              <td>{{ row.createtime }}</td>
              <td>{{ row.updatetime }}</td>
              <td class="td-actions text-right">
                <base-button type="success" size="sm" icon>
                  <i class="tim-icons icon-notes"></i>
                </base-button>
              </td>
            </template>
          </base-table>
          <hr style="margin-top: -1rem">
        </div>

        <!--分页-->
        <div style="margin-top: -0.5rem">
          <el-pagination
            style="margin-left: 28rem;color: #2E65F5"
            background
            v-model="currentPage"
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="handlePageChange"
            class="rounded-pagination blue-pagination"
          ></el-pagination>

        </div>

        <!--小机器人-->
        <float-btn></float-btn>

      </card>
      <div class=" offset-md-11" style="margin-left: 64rem;margin-top: -1rem">
        <base-button class="animation-on-hover" type="primary">添加</base-button>
      </div>
    </div>
  </div>

</template>


<script>
import BaseTable from "../components/BaseTable.vue";
import Card from "../components/Cards/Card.vue";
import baseButton from "../components/BaseButton.vue";
import Vue from "vue";
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import CourseMenu from "./CourseMenu.vue";
import FloatBtn from "../components/FloatBtn.vue";
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
  components:{
    FloatBtn,
    CourseMenu,
    BaseTable,
    Card,
    baseButton
  },
  methods: {
    getTagType(index) {
      const tagTypes = ['', 'success', 'warning', 'danger'];
      return tagTypes[index] || '';
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.tableData.slice(startIndex, endIndex);
    },
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 6, // 每页显示的数据条数
      show3: false,
      columns: ["id", "type", "course", "describe", "knowledge", "createtime", "updatetime", "actions"],
      tableData: [
        {
          "id": 1,
          "type": "视频",
          "course": "面向对象程序设计（Java）",
          "describe": "介绍Java编程语言的基础知识",
          "knowledge": ["编程基础", "Java语法"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 2,
          "type": "视频",
          "course": "Java字符串处理",
          "describe": "演示如何使用Java处理和操作字符串",
          "knowledge": ["字符串操作", "循环结构"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 3,
          "type": "视频",
          "course": "Java列表操作",
          "describe": "讲解如何使用Java对列表进行操作和处理",
          "knowledge": ["列表操作", "循环","迭代器"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 4,
          "type": "视频",
          "course": "Java条件语句",
          "describe": "介绍Java中的条件语句和逻辑判断",
          "knowledge": ["条件语句", "逻辑运算符"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 5,
          "type": "视频",
          "course": "Java循环结构",
          "describe": "讲解Java中的循环结构和迭代",
          "knowledge": ["Java内置方法"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 6,
          "type": "视频",
          "course": "Python函数",
          "describe": "介绍Python函数的定义和使用",
          "knowledge": ["函数定义", "参数传递"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 7,
          "type": "PPT",
          "course": "Python文件操作",
          "describe": "演示如何使用Python进行文件的读写操作",
          "knowledge": ["文件读写", "异常处理"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 8,
          "type": "视频",
          "course": "Python模块与包",
          "describe": "讲解Python中的模块和包的概念和使用",
          "knowledge": ["模块导入", "包管理"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 9,
          "type": "视频",
          "course": "Python异常处理",
          "describe": "介绍Python中的异常处理机制和错误处理",
          "knowledge": ["异常处理", "错误类型", "包管理"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        {
          "id": 10,
          "type": "视频",
          "course": "Python面向对象编程",
          "describe": "讲解Python中的面向对象编程的概念和使用",
          "knowledge": ["面向对象", "类与对象"],
          "createtime": "2024-03-14",
          "updatetime": "2024-03-14"
        },
        // {
        //   id: 1,
        //   type: " 视频",
        //   course: "排序算法",
        //   describe: "关于计算机科学中的算法的讲解",
        //   knowledge: ["计算机科学",'离散数学'],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 2,
        //   type: " 教案",
        //   course: "数学",
        //   describe: "涵盖了数学领域中的几何知识，包括各种几何图形和性质",
        //   knowledge: ["几何"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 3,
        //   type: " PPT",
        //   course: "化学",
        //   describe: "详细介绍了化学反应的基本概念和类型，包括氧化还原反应等",
        //   knowledge: ["氧化还原反应"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 4,
        //   type: " 教案",
        //   course: "物理",
        //   describe: "涉及物理学中的力学问题，包括牛顿定律和动力学",
        //   knowledge: ["牛顿定律","几何","力学"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 5,
        //   type: " 教案",
        //   course: "生物",
        //   describe: "提供了关于细胞生物学实验的详细步骤和操作指南",
        //   knowledge: ["细胞结构"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 6,
        //   type: " 教案",
        //   course: "历史",
        //   describe: "涵盖了世界史上各个时期的重要事件和文明发展历程",
        //   knowledge: ["文明","历史","地理","发展"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 7,
        //   type: " 视频",
        //   course: "地理",
        //   describe: "介绍了地球科学领域的重要概念，包括板块构造和地质特征",
        //   knowledge: ["板块构造","地质"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 8,
        //   type: " PPT",
        //   course: "工程学",
        //   describe: "可用于进行电路设计和数字逻辑模拟实验，帮助学习工程学的基础知识",
        //   knowledge: ["数字逻辑"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 9,
        //   type: " 教案",
        //   course: "化学",
        //   describe: "记录了一次化学实验的过程和结果，重点关注溶解度的实验数据和分析",
        //   knowledge: ["溶解度","实践"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 10,
        //   type: " 视频",
        //   course: "绘图教程",
        //   describe: "提供了关于素描艺术的指导和技巧，特别是透视绘画的方法和实践",
        //   knowledge: ["艺术","医学","编程","实践"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 11,
        //   type: " 教案",
        //   course: "抗癌药物",
        //   describe: "探讨了新型药物在癌症治疗中的应用，重点分析了其治疗机制和临床效果",
        //   knowledge: ["医学"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // },
        // {
        //   id: 12,
        //   type: " 视频",
        //   course: "深度学习",
        //   describe: "基于机器学习的图像识别应用，利用深度学习算法实现对图像内容的识别和分类",
        //   knowledge: ["编程项目"],
        //   createtime: "2024-03-14",
        //   updatetime: "2024-03-14",
        // }
      ]
    }

  },

}
</script>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}
.tag-item {
  margin-right: 3px;
}

.class-menu{
//background-color: rgb(255, 255, 255) !important;
  height: 32rem;
  width: 71rem;
}
</style>
